<template>
    <n-spin size="large" :show="loading">
        <n-grid :cols="30" :x-gap="12" v-if="init">
            <n-gi :span="10">
                <n-card title="入驻申请列表" size="small">
                    <template #header-extra>
                        <n-button type="warning" size="small" circle @click="execLoadApplys">
                            <template #icon>
                                <n-icon :component="RefreshRound" />
                            </template>
                        </n-button>
                    </template>
                    <n-list v-if="items.length > 0">
                        <n-scrollbar :style="{ maxHeight: listHeight }">
                            <n-list-item v-for="mch in items">
                                <template #suffix>
                                    <n-button size="small" :type="item.id == mch.id ? 'primary' : 'default'" @click="() => (item = mch)">选择</n-button>
                                </template>
                                <n-thing :title="mch.name" :description="mch.full" />
                            </n-list-item>
                        </n-scrollbar>
                    </n-list>
                    <n-empty v-else description="暂无新申请门店"></n-empty>
                </n-card>
            </n-gi>
            <n-gi :span="20">
                <n-card title="入驻申请资料" size="small" v-if="item.id">
                    <n-scrollbar :style="{ maxHeight: height, minHeight: height }">
                        <n-space vertical :size="16">
                            <n-descriptions label-placement="left" bordered :column="1">
                                <n-descriptions-item :label-style="labelStyle" label="门店简称">{{ item.name }}</n-descriptions-item>
                                <n-descriptions-item :label-style="labelStyle" label="公司全称">{{ item.full }}</n-descriptions-item>
                                <n-descriptions-item :label-style="labelStyle" label="法人名称">{{ item.leader }}</n-descriptions-item>
                                <n-descriptions-item :label-style="labelStyle" label="经营地址">{{ item.addr }}</n-descriptions-item>
                                <n-descriptions-item :label-style="labelStyle" label="联系电话">{{ item.tel }}</n-descriptions-item>
                            </n-descriptions>

                            <n-grid :cols="9" :x-gap="12" :y-gap="12">
                                <n-gi :span="3">
                                    <n-card title="营业执照" size="small">
                                        <n-image width="200" height="140" :src="item.olc.pica" />
                                    </n-card>
                                </n-gi>
                                <n-gi :span="3">
                                    <n-card title="门头照片" size="small">
                                        <n-image width="200" height="140" :src="item.himg" />
                                    </n-card>
                                </n-gi>
                            </n-grid>

                            <n-space justify="space-between" :style="{ width: '100%' }">
                                <n-space justify="start">
                                    <n-form inline :label-width="80" label-placement="left">
                                        <n-form-item>
                                            <n-switch v-model:value="pass">
                                                <template #checked>通过</template>
                                                <template #unchecked>驳回</template>
                                            </n-switch>
                                        </n-form-item>
                                        <n-form-item label="驳回原因" v-if="!pass">
                                            <n-select v-model:value="memo" filterable tag :options="opts" />
                                        </n-form-item>
                                        <n-form-item label="提示" v-if="pass">通过审核将进行初始化门店数据，生成入驻合同，预计用时3~8秒钟。请耐心等候</n-form-item>
                                    </n-form>
                                </n-space>

                                <n-space justify="end">
                                    <n-button type="success" v-if="pass" :loading="loading" @click="execSaveApply">
                                        <template #icon>
                                            <n-icon :component="CheckRound" />
                                        </template>
                                        通过申请
                                    </n-button>
                                    <n-button type="error" v-else :loading="loading" @click="execSaveApply">
                                        <template #icon>
                                            <n-icon :component="CloseRound" />
                                        </template>
                                        驳回申请
                                    </n-button>
                                </n-space>
                            </n-space>
                        </n-space>
                    </n-scrollbar>
                </n-card>
                <n-empty v-else-if="items.length > 0" description="请选择申请门店进行审核"></n-empty>
            </n-gi>
        </n-grid>
    </n-spin>
</template>

<script lang="ts" setup>
import { Http } from '@/libs'
import { useStore } from '@/store'
import { computed, onActivated, ref } from 'vue'
import { CheckRound, CloseRound, RefreshRound } from '@vicons/material'

const store = useStore()
const { $notification: notification } = window

const loading = computed(() => store.state.loading.flag)
const listHeight = computed(() => store.state.browser.innerHeight - 260 + 'px')
const height = computed(() => store.state.browser.innerHeight - 230 + 'px')

const init = ref<boolean>(false)

const labelStyle = {
    width: '100px',
}

const param = ref({
    query: {
        name: '',
        role: undefined,
    },
    pager: {
        page: 1,
        size: 10,
        time: new Date().getTime(),
    },
})

const opts = ['证件图片不清晰', '上传图片非有效的证件', '证件与提交资料不符', '证件已过期'].map(m => {
    return { label: m, value: m }
})

const item = ref<any>({})

const pass = ref(true)
const memo = ref('')

const pager = ref({
    now: 1,
    row: 0,
    all: 0,
    fms: 0,
})
const items = ref<any>([])

const execLoadApplys = () => {
    init.value = false
    Http.post('/ops/biz/merchant/apply/list', {
        pager: {
            page: 1,
            size: 100,
            time: new Date().getTime(),
        },
        query: {
            name: '',
        },
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        if (resp.data.pager.now == 1) {
            param.value.pager.time = resp.data.pager.fms
        }
        pager.value = resp.data.pager
        items.value = resp.data.items
        if (resp.data.items.length > 0) {
            item.value = resp.data.items[0]
        } else {
            item.value = {}
        }
        pass.value = true
        memo.value = ''
        init.value = true
    })
}

const execSaveApply = (e: Event) => {
    e.preventDefault()
    if (!pass.value && memo.value == '') {
        notification.error({
            duration: 1500,
            title: '请选择驳回原因',
            description: '您未选择驳回原因，请选择具体原因供申请人参考',
        })
        return
    }
    Http.post('/ops/biz/merchant/apply/audit', {
        id: item.value.id,
        pass: pass.value,
        memo: pass.value ? '审核通过' : memo.value,
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        execLoadApplys()
        notification.success({
            duration: 1500,
            title: '操作成功',
            content: pass.value ? '您已通过门店入驻申请' : '您已驳回门店入驻申请',
        })
    })
}

onActivated(() => {
    execLoadApplys()
})
</script>
